<template>
  <div class="home-view">
    <n-config-provider :theme="darkTheme">
      <div class="title">演示内存数据库系统与结构化数据库系统的协同工作机制</div>
      <div class="input-box">
        <n-input style="width: 100%" v-model:value="nameTextInput" type="text"
                 placeholder="Name, MaxLength = 15 (名称, 最大长度 = 15)" maxlength="15"/>
      </div>
      <div class="input-box">
        <n-input style="width: 100%" v-model:value="valueTextInput" type="text"
                 placeholder="Item, MaxLength = 128, TTL = 15s (内容, 最大长度 = 128, TTL = 15s)" maxlength="128"/>
      </div>
      <div class="input-box">
        <n-button type="primary" tertiary :loading="false" :disabled="false" @click="handleAddButtonClick">添加</n-button>
        <div class="button-space"></div>
        <n-button type="primary" tertiary :loading="false" :disabled="true">添加并预热</n-button>
        <div class="button-space"></div>
        <n-button type="info" tertiary :loading="false" :disabled="true">查询</n-button>
        <div class="button-space"></div>
        <n-button type="error" tertiary :loading="false" :disabled="true">删除</n-button>
        <div class="button-space"></div>
        <n-button type="warning" tertiary :loading="false" :disabled="true">更新</n-button>
      </div>
      <div class="process-detail">
        <div v-if="clientStatus === 'listen-event'">客户端 UI 监听点击事件</div>
        <div v-if="clientStatus === 'exec-event-method'">客户端触发指定的事件处理函数</div>
        <div v-if="clientStatus === 'update-ui'">客户端更新 UI 状态</div>
        <div v-if="clientStatus === 'prepare'">正在构建客户端请求</div>
        <div v-if="clientStatus === 'waiting'">发送请求并等待响应, 进入超时等待阶段</div>
        <div v-if="clientStatus === 'process'">正在处理响应的数据</div>
      </div>
      <div class="input-box" style="flex-direction: column">
        <n-alert v-if="notificationStatus === 'doing'" style="width: 100%;margin-bottom: 10px;" title="正在处理。"
                 type="default" :bordered="false">
          系统正在处理当前的请求...
        </n-alert>
        <n-alert v-if="notificationStatus === 'system-error'" style="width: 100%;margin-bottom: 10px;" title="系统错误。"
                 type="error" :bordered="false">
          应用系统错误或者缓存、存储等中间件系统暂时发生了异常。严重的影响到了用户体验。
        </n-alert>
        <n-alert v-if="notificationStatus === 'not-found'" style="width: 100%;margin-bottom: 10px;"
                 title="找不到想要的数据。" type="error" :bordered="false">
          缓存和数据库中均找不到想要的数据。
        </n-alert>
        <n-alert v-if="notificationStatus === 'ok-from-cache'" style="width: 100%;margin-bottom: 10px;"
                 title="找到，来自缓存，完美。" type="success" :bordered="false">
          查询时在缓存查找阶段短路。
        </n-alert>
        <n-alert v-if="notificationStatus === 'ok-from-database'" style="width: 100%;margin-bottom: 10px;"
                 title="找到，来自数据库，因为缓存中找不到该数据。" type="warning"
                 :bordered="false">
          查询时缓存丢失或者超时, 进入到了数据库查询阶段。
        </n-alert>
        <n-alert v-if="notificationStatus === 'updated'" style="width: 100%;margin-bottom: 10px;" title="更新成功。"
                 type="success" :bordered="false">
          数据更新成功。
        </n-alert>
        <n-alert v-if="notificationStatus === 'updated-clean-cache-failed'" style="width: 100%;margin-bottom: 10px;"
                 title="更新完成，但是缓存清空失败。" type="warning"
                 :bordered="false">
          数据更新操作部分成功，删除缓存数据时发生了错误, 这将对客户端用户体验有潜在的影响。
        </n-alert>
        <n-alert v-if="notificationStatus === 'deleted'" style="width: 100%;margin-bottom: 10px;" title="删除成功。"
                 type="success" :bordered="false">
          数据删除成功。
        </n-alert>
        <n-alert v-if="notificationStatus === 'deleted-clean-cached-failed'" style="width: 100%;margin-bottom: 10px;"
                 title="删除完成，但是缓存清空失败。" type="warning"
                 :bordered="false">
          数据删除操作部分成功，删除缓存数据时发生了错误，这将在 TTL 时间内失效，用户体验有潜在的影响。
        </n-alert>
        <n-alert v-if="notificationStatus === 'saved-no-cached'" style="width: 100%;margin-bottom: 10px;"
                 title="添加完成。" type="warning" :bordered="false">
          数据已经被添加到数据库，但是不在缓存中，初次查询速度有潜在的性能瓶颈。
        </n-alert>
        <n-alert v-if="notificationStatus === 'saved-cache-failed'" style="width: 100%;margin-bottom: 10px;"
                 title="添加完成，但是预热失败。" type="warning"
                 :bordered="false">
          数据已经被添加到数据库，但是不在缓存中，因为缓存发生了异常，这将对客户端无影响。
        </n-alert>
        <n-alert v-if="notificationStatus === 'saved-cached'" style="width: 100%;margin-bottom: 10px;"
                 title="添加并完成了预热。" type="success" :bordered="false">
          数据在缓存和数据库中，初次查询将会变得更快。
        </n-alert>
      </div>
      <div class="process-detail" style="text-align: center">欢迎参加运维开发课程,
        这将探索更加有意思的话题！欢迎关注"许少年的读书笔记"微信公众号。
      </div>
      <n-modal
          v-model:show="showModal"
          preset="dialog"
          title="一些关键信息"
          content="为了演示，任何操作将被故意拖慢执行速度。"
          positive-text="好"
          :mask-closable="true"
      />
    </n-config-provider>
  </div>
</template>

<script setup>
import {darkTheme} from 'naive-ui';
import {ref} from "vue";
import axios from 'axios';

let nameTextInput = ref("");
let valueTextInput = ref("");
let clientStatus = "prepare"; // prepare, waiting, process, unknown, listen-event, exec-event-method, update-ui
let notificationStatus = "saved-cache-failed";  // doing, system-error, not-found, ok-from-cache, ok-from-database, updated, updated-clean-cache-failed, deleted
// deleted-clean-cached-failed, saved-no-cached, saved-cache-failed, saved-cached
let showModal = ref(true)

const handleAddButtonClick = () => {
  axios.get("/api/mixin/item", {
    params: {
      "name": nameTextInput.value
    }
  }).then(resp => {
    const data = resp.data;
    console.log("正在查询名字为:", nameTextInput.value, "对应的数据")
    console.log(data)
  }).catch(err => {
    console.error(err);
  })
}

</script>

<style scoped>
.home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-content: center;
}

.title {
  font-size: 20pt;
  padding-bottom: 40px;
  text-align: center;
  width: 100%;
}

.input-box {
  padding-top: 15px;
  width: 800px;
  display: flex;
  justify-content: center;
}

.button-space {
  width: 15px;
}

.process-detail {
  width: 800px;
  font-size: 10pt;
  line-height: 15pt;
  color: gray;
  padding-top: 10px;
}
</style>
